<template>
  <view class="page container">
    <view class="bgc-fff">
      <u--form
        labelPosition="left"
        :model="formData"
        :rules="rules"
        ref="uForm"
        labelWidth="200rpx"
        errorType="toast"
      >
        <u-form-item label="企业类型：" prop="type" borderBottom>
          <view class="flex-column-center" style="justify-content: flex-end">
            <view class="flex-column-center" @click="formData.type = '0',formData.logo=''">
              <block>
                <image
                  class="w-32 h-32"
                  src="/static/is-select.png"
                  v-if="formData.type == '0'"
                ></image>
                <image
                  class="w-32 h-32"
                  src="/static/select.png"
                  v-else
                ></image>
              </block>
              <text class="ml-12">酒商</text>
            </view>
            <view class="flex-column-center ml-32" @click="formData.type = '1',formData.logo=''">
              <block>
                <image
                  class="w-32 h-32"
                  src="/static/is-select.png"
                  v-if="formData.type == '1'"
                ></image>
                <image
                  class="w-32 h-32"
                  src="/static/select.png"
                  v-else
                ></image>
              </block>
              <text class="ml-12">酒厂</text>
            </view>
          </view>
        </u-form-item>
        <u-form-item label="企业名称：" prop="title" borderBottom>
          <u-input
            v-model="formData.title"
            border="none"
            inputAlign="right"
            placeholder="请输入企业名称"
          ></u-input>
        </u-form-item>
        <u-form-item label="联系人：" prop="contact_name" borderBottom>
          <u-input
            v-model="formData.contact_name"
            border="none"
            inputAlign="right"
            placeholder="请输入联系人姓名"
            fontSize="28rpx"
          ></u-input>
        </u-form-item>
        <u-form-item label="联系方式：" prop="contact_phone" borderBottom>
          <u-input
            v-model="formData.contact_phone"
            border="none"
            inputAlign="right"
            placeholder="请输入手机号"
            fontSize="28rpx"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="所在省市区："
          prop="region_name"
          borderBottom
          @click="openCommunityPicker"
        >
          <u-input
            readonly
            v-model="formData.region_name"
            border="none"
            inputAlign="right"
            placeholder="请选择所在省市区"
            fontSize="28rpx"
          >
            <template slot="suffix">
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item
          label="经营位置："
          prop="map_address"
          borderBottom
          @click="chooseLocation"
        >
          <u-input
            readonly
            v-model="formData.map_address"
            border="none"
            inputAlign="right"
            placeholder="请选择厂区位置"
            fontSize="28rpx"
          >
            <template slot="suffix">
              <image class="w-25 h-32" src="/static/svg/local.svg"></image>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item prop="map_street" borderBottom>
          <view class="pl-28">
            <u-input
              v-model="formData.map_street"
              border="none"
              placeholder="请输入详细地址如门牌号等"
              fontSize="28rpx"
            ></u-input>
          </view>
        </u-form-item>
        <u-form-item label="营业执照：" prop="license" labelPosition="top">
          <view class="pl-28 mt-16">
            <image
              class="w-284 h-204 br-12"
              :src="formData.license || '/pages2/static/upload-img.png'"
              @click="uploadImg('license')"
            >
            </image>
          </view>
        </u-form-item>
		<u-form-item v-if="formData.type=='0'" label="门头照片：(至多一张)" prop="logo" labelPosition="top" labelWidth="400rpx">
		  <view class="pl-28 mt-16">
		    <image class="w-284 h-204 br-12" :src="formData.logo || '/pages2/static/upload-img.png'"
		      @click="uploadImg('logo')">
		    </image>
		  </view>
		</u-form-item>
        <u-form-item
          label="简介："
          prop="content"
          borderBottom
          labelPosition="top"
        >
          <!-- <u-input v-model="formData.content" border="none" type="textarea" placeholder="请输入企业简介"
            fontSize="28rpx"></u-input> -->
          <view class="pl-28 mt-16">
            <view class="bgc-f7f8fa">
              <u-textarea
                v-model="formData.content"
                border="none"
                height="268rpx"
                placeholder="请输入企业简介"
              ></u-textarea>
            </view>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view class="bottom-box pl-32 pr-32">
      <view class="flex-column flex-column-center" @click="resetForm">
        <u-icon name="reload" size="40rpx"></u-icon>
        <text class="fs-24">重置</text>
      </view>
      <u-button
        :customStyle="{
          backgroundColor: '#C5261D',
          color: '#fff',
          borderRadius: '10rpx',
          width: '596rpx',
          height: '88rpx',
          fontSize: '32rpx',
          border: 'none',
        }"
        @click="submitForm"
        >提交申请</u-button
      >
    </view>
    <CommunityPicker2 ref="communityPickerRef" @onSubmit="onCommunitySubmit" />
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { getAreaByLngLatApi } from "@/services/tmap";
import CommunityPicker2 from "../components/CommunityPicker2.vue";
import {
  applyEnterFactoryApi,
  applyEnterFactoryDetailApi,
} from "@/services/my";
export default {
  components: {
    CommunityPicker2,
  },
  data() {
    return {
      activeTab: "1",
      formData: {
		  logo:"",
        type: "0", // 0-酒商，1-酒厂
        title: "", // 企业名称
        contact_name: "", // 联系人
        contact_phone: "", // 联系电话
        license: "", // 营业执照
        province: "", // 省
        city: "", // 市
        district: "", // 区
        map_address: "", // 经营位置
        map_street: "", //详细地址
        region_name: "",
        lng: "", // 经度
        lat: "", // 纬度
        content: "", // 简介
      },
      addressText: "", // 显示用的地址文本
      rules: {
        type: {
          type: "string",
          required: true,
          message: "请选择企业类型",
        },
        title: {
          type: "string",
          required: true,
          message: "请输入企业名称",
        },
        contact_name: {
          type: "string",
          required: true,
          message: "请输入联系人姓名",
        },
        contact_phone: {
          type: "string",
          required: true,
          pattern: /^1[3-9]\d{9}$/,
          message: "请输入正确的手机号",
        },
        license: {
          type: "string",
          required: true,
          message: "请上传营业执照",
        },
        province: {
          type: "string",
          required: true,
          message: "请选择经营位置",
        },
        content: {
          type: "string",
          required: true,
          message: "请输入企业简介",
        },
        map_address: {
          type: "string",
          required: true,
          message: "请选择经营位置",
        },
        map_street: {
          type: "string",
          required: true,
          message: "请输入详细地址",
        },
		logo: {
		  type: "string",
		  required: true,
		  message: "请上传门头照片",
		},
        region_name: {
          type: "string",
          required: true,
          message: "请选择所在省市区",
        },
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    getStatusImg() {
      switch (+(this.userInfo?.jiu_shop?.status || 9)) {
        case 0:
          return "/pages2/static/shenhezhong.png";
        case 1:
          return "/pages2/static/shenhetongguo.png";
        case 2:
          return "/pages2/static/shenhejujue.png";
        default:
          return "";
      }
    },
  },
  onLoad() {
    this.getUserInfo().then(() => {
      const { jiu_shop } = this.userInfo;
      if (jiu_shop.id) {
        this.getApplyEnterFactoryDetail();
      }
    });
  },
  methods: {
    ...mapActions({
      getUserInfo: "user/getUserInfo",
    }),
    async submitForm() {
		// this.$utils.redirectTo("/pages2/my/applyResult");
		
      this.$refs.uForm.validate().then(async () => {
        let copyData = uni.$u.deepClone(this.formData);
        await applyEnterFactoryApi(copyData);
        // this.$utils.redirectTo("/pages2/my/apply_enter_factory_detail?toast=1");
		uni.redirectTo({
			url:'/pages2/my/applyResult'
		})
      });
    },
    resetForm() {
      this.formData = this.$options.data().formData;
    },
    openCommunityPicker() {
      this.$refs.communityPickerRef.open();
    },
    onCommunitySubmit(e, names) {
      const [province, city, district] = e;
      const [provinceName, cityName, districtName] = names;
      this.formData.province = province;
      this.formData.city = city;
      this.formData.district = district;
      this.formData.region_name = `${provinceName} ${cityName} ${districtName}`;
    },
    getApplyEnterFactoryDetail() {
      applyEnterFactoryDetailApi().then((res) => {
        if (res && res.data) {
          const data = res.data?.shop_info;
          // 处理图片数组
          let images = [];
          if (data.images) {
            const imageUrls = data.images.split(",");
            images = imageUrls.map((url) => ({
              fullurl: url,
              urls: url,
            }));
          }
          data.type = String(data.type);
          this.formData = {
            ...data,
            images,
          };
        }
      });
    },
    chooseLocation() {
      uni.chooseLocation({
        success: (res) => {
          this.formData.map_address = res.address;
          this.formData.lat = res.latitude;
          this.formData.lng = res.longitude;
        },
      });
    },
    uploadImg(type) {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const file = res.tempFilePaths[0];
          this.$utils.uploadImg(file).then((ress) => {
            const { fullurl } = ress;
            this.formData[type] = fullurl;
          });
        },
      });
    },
    // 重置表单
    reset() {
      this.$refs.uForm.resetFields();
      this.addressText = "";
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 188rpx;
  background-color: #f7f8fa;

  /deep/.u-form-item__body {
    padding-top: 28rpx;
    padding-bottom: 28rpx;
  }

  /deep/.u-form-item__body__left {
    padding-left: 28rpx;
  }

  /deep/.u-form-item__body__left__content__label {
    font-size: 28rpx !important;
  }

  /deep/.u-form-item__body__right {
    padding-right: 28rpx;
  }

  /deep/.u-textarea {
    background-color: transparent;
  }

  .bottom-box {
    padding-top: 16rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 168rpx;
    background-color: #fff;
    box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
  }

  .tabs {
    width: 686rpx;
    height: 68rpx;
    border-radius: 12rpx;
    background: #f7f8fa;
    display: flex;
    justify-content: space-between;

    .tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 500;

      &-active {
        border-radius: 12rpx;
        background: $theme-color;
        color: #fff;
      }
    }
  }
}
</style>